<script lang="ts" setup>
import { onMounted, ref, watch } from "vue"
import { getMenuTree, create, update, del, getLazyList } from "@/api/system-api/menu/index"
import {
  useTableTreeDataMember,
  useTreeMember,
  useDataDialogMember
  //useDictionaryOptions
} from "@/hooks/commonData/useCommonData"
import { Menu } from "@/api/system-api/menu/types/menu"
import { MenuQuery } from "@/api/system-api/menu/types/menuQuery"
import * as ElIcon from "@element-plus/icons-vue"
import iconSelectComponent from "@/components/ElIcon/iconSelectComponent.vue"
import DictionaryTag from "@/components/DictionaryDisplay/dictionaryTag.vue"
import DictionarySelect from "@/components/DictionaryDisplay/dictionarySelect.vue"

const listQuery = { page: 1, limit: 10 } as MenuQuery
const {
  tableRef,
  tableLoadingRef,
  queryRef,
  totalRef,
  tableDataRef,
  getList,
  handleSizeChange,
  handleCurrentChange,
  load,
  reload
} = useTableTreeDataMember(listQuery, getLazyList, ["id", "menuParentId", "parentId"])
const menu = { menuType: "directory" } as Menu
//(t) => t.id == null || t.id == undefined
const {
  formRef,
  entityRef,
  dialogStatus,
  currentRef,
  getCurrent,
  handleCreate,
  handleUpdate,
  handleDelete,
  handleDetail,
  submit
} = useDataDialogMember(menu, create, update, del, [["id", "id"]], reload)
const rules = {
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  menuRoute: [{ required: true, message: "请输入菜单路由", trigger: "blur" }],
  menuPath: [],
  menuIcon: [],
  menuSortNo: [],
  isUse: [{ required: true, message: "请选择是否启用", trigger: "blur" }],
  isHidden: [{ required: true, message: "请选择是否隐藏", trigger: "blur" }],
  isRender: [
    {
      required: true,
      message: "请选择是否渲染上级菜单",
      trigger: "blur"
    }
  ],
  isLayout: [{ required: true, message: "请选择是否有页面", trigger: "blur" }],
  menuType: [{ required: true, message: "请选择菜单类型", trigger: "blur" }]
}
const changeStatus = (val: number): string => {
  if (val === 0) {
    return "否"
  } else {
    return "是"
  }
}
const { optionsRef, getTree } = useTreeMember(getMenuTree)
watch(dialogStatus, (newVal: boolean) => {
  if (newVal) {
    getTree()
  }
})
const optionProp = {
  value: "id",
  label: "menuName",
  children: "children",
  disabled: function (data: Menu): boolean {
    if (entityRef.value.id === data.id) {
      return true
    } else if (entityRef.value.menuType === "directory" && data.menuType === "directory") {
      return false
    } else if (entityRef.value.menuType === "menu" && data.menuType === "directory") {
      return false
    } else if (entityRef.value.menuType === "button" && data.menuType === "menu") {
      return false
    } else {
      return true
    }
  }
}
const drawer = ref(false)
function getIcon(data: string): void {
  entityRef.value.menuIcon = data
  drawer.value = false
}
// const { optionsRef: ops, getOptions } = useDictionaryOptions(9)

// const { optionsRef: menuOptionsRef, getOptions: getMenuTypeOptions } = useDictionaryOptions(2)
onMounted(async () => {
  await getList()
  //await getOptions()
  //await getMenuTypeOptions()
})
</script>
<template>
  <div class="app-container">
    <el-row style="margin-bottom: 5px" :gutter="20">
      <el-col :span="6">
        <el-button type="primary" :icon="ElIcon.Search" @click="getList">搜索</el-button>
        <el-button type="primary" :icon="ElIcon.Plus" @click="handleCreate">新增</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" header="字典管理">
      <el-table
        ref="tableRef"
        v-loading="tableLoadingRef"
        :data="tableDataRef"
        border
        fit
        highlight-current-row
        stripe
        style="width: 100%"
        element-loading-text="给我一点时间"
        lazy
        row-key="id"
        :load="load"
      >
        <!-- <el-table-column label="菜单ID" prop="ID" /> -->
        <el-table-column label="菜单名称" prop="menuName" show-overflow-tooltip />
        <el-table-column label="菜单key" prop="menuKey" show-overflow-tooltip />
        <el-table-column label="菜单路由" prop="menuRoute" show-overflow-tooltip />
        <el-table-column label="菜单路径" prop="menuPath" show-overflow-tooltip />
        <el-table-column label="菜单图标" align="center" show-overflow-tooltip>
          <template #default="scope">
            <component
              v-if="scope.row.menuIcon"
              :is="ElIcon[scope.row.menuIcon as keyof typeof ElIcon]"
              style="width: 25px; height: 25px"
            />
          </template>
        </el-table-column>
        <el-table-column label="菜单序号" prop="menuSortNo" align="center" />
        <el-table-column label="是否启用" align="center">
          <template #default="scope">
            {{ changeStatus(scope.row.isUse) }}
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" align="center">
          <template #default="scope">
            {{ changeStatus(scope.row.isHidden) }}
          </template>
        </el-table-column>
        <el-table-column label="是否渲染上级" align="center">
          <template #default="scope">
            {{ changeStatus(scope.row.isRender) }}
          </template>
        </el-table-column>
        <el-table-column label="菜单类型" align="center" prop="menuTypeName">
          <template #default="scope">
            <DictionaryTag :parent-id="9" :current-value="scope.row.menuType" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" :icon="ElIcon.Edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="info" :icon="ElIcon.Pointer" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="danger" :icon="ElIcon.Delete" @click="handleDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 15px">
        <el-pagination
          :current-page="queryRef.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryRef.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRef"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogStatus" :modal-append-to-body="false" :close-on-click-modal="false" :title="getCurrent()">
      <el-form ref="formRef" :model="entityRef" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="entityRef.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="menuType">
              <DictionarySelect :parent-id="9" v-model="entityRef.menuType" />
              <!-- <el-select v-model="entityRef.menuType" placeholder="请选择菜单类型" clearable>
                <el-option v-for="(item, key) in ops" :key="key" :label="item.name" :value="item.value" />
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单路由" prop="menuRoute">
              <el-input v-model="entityRef.menuRoute" placeholder="/path这种形式" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父级菜单">
              <el-tree-select
                :data="optionsRef"
                v-model="entityRef.menuParentId"
                placeholder="请选择父级菜单"
                :props="optionProp"
                :check-strictly="true"
              >
                <template #default="{ node, data }">
                  <DictionaryTag :parent-id="9" :current-value="data.menuType" />
                  <span class="pl-1">{{ node.label }}</span>
                </template>
              </el-tree-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="entityRef.menuType === 'menu'">
            <el-form-item label="菜单物理路径">
              <el-input v-model="entityRef.menuPath" placeholder="/filePath形式(不要录入.vue后缀)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重定向地址">
              <el-input placeholder="请输入重定向地址" v-model="entityRef.menuRedirect" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标">
              <el-row>
                <el-col :span="16">
                  <el-input v-model="entityRef.menuIcon" placeholder="请选择图标" readonly />
                </el-col>
                <el-col :span="6" :offset="2">
                  <el-button type="primary" @click="drawer = true">选择图标</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单序号">
              <el-input v-model="entityRef.menuSortNo" placeholder="请输入菜单序号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单key">
              <el-input v-model="entityRef.menuKey" placeholder="请输入菜单key" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="entityRef.menuType === 'menu' && currentRef === 1">
            <el-form-item label="预创建按钮">
              <DictionarySelect
                :parent-id="2"
                v-model="entityRef.buttonKeys"
                :multiple="true"
                placeholder="请选择菜单的按钮"
              />
              <!-- <el-select placeholder="请选择菜单的按钮" v-model="entityRef.buttonKeys" multiple clearable>
                <el-option v-for="(m, key) in menuOptionsRef" :key="key" :label="m.name" :value="m.value" />
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isUse">
              <el-switch
                v-model="entityRef.isUse"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否隐藏" prop="isHidden">
              <el-switch
                v-model="entityRef.isHidden"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="渲染上级页面" prop="isRender">
              <el-switch
                v-model="entityRef.isRender"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否目录">
              <el-switch
                v-model="entityRef.isLayout"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; display: flex; justify-content: center">
          <el-button v-if="currentRef != 3" type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="dialogStatus = false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <el-drawer title="图标选择" v-model="drawer" direction="rtl">
      <iconSelectComponent @getIcon="getIcon" />
    </el-drawer>
  </div>
</template>

<style scoped></style>
